<!DOCTYPE html>

<html>

	<head>
		<meta charset="utf-8">
		<title>基于 layui 的极简社区页面模版</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="keywords" content="fly,layui,前端社区">
		<meta name="description" content="Fly社区是模块化前端UI框架Layui的官网社区，致力于为web开发提供强劲动力">
		<link rel="stylesheet" href="../res/layui/css/layui.css">
		<link rel="stylesheet" href="../res/css/global.css">
	</head>

	<div class="layui-upload">
		<button type="button" class="layui-btn" id="test2">多图片上传</button><input class="layui-upload-file" type="file" name="file" multiple="">
		<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
			预览图：
			<div class="layui-upload-list" id="demo2"><img src=""
					alt="c.jpg" class="layui-upload-img"></div>
		</blockquote>
	</div>
	<script src="../res/layui/layui.js"></script>

	<script type="text/javascript">
		var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");
		document.write(unescape("%3Cspan id='cnzz_stat_icon_30088308'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "w.cnzz.com/c.php%3Fid%3D30088308' type='text/javascript'%3E%3C/script%3E"));
	</script>
	<script>
		layui.use('upload', function() {
			var upload = layui.upload;
			//多图片上传
			upload.render({
				elem: '#test2',
				url: '/upload/',
				multiple: true,
				before: function(obj) {
					//预读本地文件示例，不支持ie8
					obj.preview(function(index, file, result) {
						$('#demo2').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')
					});
				},
				done: function(res) {
					//上传完毕
				}
			});
			/*//执行实例
			var uploadInst = upload.render({
				elem: '#test2' //绑定元素
					,
				url: '/upload/' //上传接口
					,
				done: function(res) {
					//上传完毕回调
				},
				error: function() {
					//请求异常回调
				}
			});*/
		});
	</script>
	</body>

</html>